<button mat-button color="accent"
  [cdkMenuTriggerFor]="projectMenu">
  <span class="flex items-center">
    {{ project().name }}
    <svg width="20" height="20" fill="currentColor" style="margin-left: -2px; flex-shrink: 0;">
      <path d="M9.261 12.697l-2.955-2.93a1.029 1.029 0 010-1.464 1.051 1.051 0 011.478 0L10 10.5l2.216-2.197a1.051 1.051 0 011.478 0 1.03 1.03 0 010 1.465l-2.955 2.929a1.051 1.051 0 01-1.478 0z"></path>
    </svg>
  </span>
</button>

<ng-template #projectMenu xPosition="before">
  <div cdkMenu class="cdk-menu__medium">
    <pac-inline-search class="mx-2 rounded-xl mb-2"
      [formControl]="searchControl"
      (click)="$event.stopPropagation()"
    />
    
    @for (item of projects(); track item.id) {
      <button cdkMenuItem role="menuitemradio"
        [class.active]="project().id === item.id"
        (click)="selectProject(item)">
        {{ item.name }}
      </button>
    }

    <div class="w-full border-b border-solid border-divider-regular my-1"></div>

    <button cdkMenuItem (click)="createProject()">
      <i class="ri-function-add-line mr-1"></i>
      {{ 'PAC.Project.NewProject' | translate: {Default: 'New Project'} }}
    </button>
  </div>
</ng-template>